<template>
  <div>
    <el-form class="m7-form" :model="form" :rules="ruleSpareParts" ref="form" label-position="top">
      <el-form-item label="服务记录名称" prop="name">
        <el-input
          v-model.trim="form.name"
          size="mini"
          placeholder="请输入"
        >
        </el-input>
      </el-form-item>
      <el-form-item
        label="选择触发事件"
        prop="triggerEvent"
      >
        <el-select
          v-model="form.triggerEvent"
          placeholder="请选择"
          filterable
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="选择生效范围"
        prop="takeEffectType"
      >
      <el-radio-group v-model="form.takeEffectType">
        <el-radio-button :label="1">全局生效</el-radio-button>
        <el-radio-button :label="2">选择节点</el-radio-button>
      </el-radio-group>
      <el-select
        v-if="form.takeEffectType === 2"
        v-model="form.nodeList"
        multiple
        collapse-tags
        placeholder="请选择"
        filterable
      >
          <el-option
            v-for="item in list"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="选择触发条件"
        prop="filters"
      >
        <conditionForm
          :fieldsList="filterFieldList"
          :conditonList="form.filters"
          class="condition"
          type="filter"
        >
        </conditionForm>
      </el-form-item>
      <el-form-item label="自定义服务记录文案" prop="template" style="position: relative;">
        <el-dropdown trigger="click" @command="handleCommandField" click="varField">
          <span class="el-dropdown-link">
            添加变量字段<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="item.businessId" v-for="item in varFieldList" :key="item.businessId">{{item.name}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-input
          :autosize="{ minRows: 2, maxRows: 6}"
          v-model.trim="form.template"
          type="textarea"
          size="mini"
          placeholder="请输入"
        >
        </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Ref } from 'vue-property-decorator'
import conditionForm from '@/afterSales/components/conditionFilter/conditionForm.vue';
import { busConfigStore } from '@/afterSales/views/config/serviceConfig/store/busConfigStore';
import { commonAction } from '@/utils/common';
interface Form {
  nodeList?: any
  id?: string
  takeEffectType: number
  filters: any
  triggerEvent: number
  name: string,
  template: string
}
@Component({
  name: 'addOrEditService',
  components: {
    conditionForm
  }
})
export default class SparePartsAddOrEdit extends Vue {
  @Prop() private id!: string
  private list = []
  private options = Object.freeze([
    {
      label: '工单进入节点',
      value: 1
    },
    {
      label: '工单离开节点',
      value: 2
    },
    {
      label: '工单终止',
      value: 3
    },
    {
      label: '工单完成',
      value: 4
    },
    {
      label: '工单被转派',
      value: 5
    },
    {
      label: '工单被领取',
      value: 6
    },
    {
      label: '工单被催办',
      value: 7
    }
  ])

  private $message: any
  private $route: any;
  private get varFieldList () {
    return busConfigStore.list.filter(item => {
      return ['associateUser', 'associateSpare', 'associateService', 'group', 'accessory'].indexOf(item.fieldType) === -1
    })
  }

  private get filterFieldList () {
    return busConfigStore.list.filter(item => {
      return ['group'].indexOf(item.fieldType) === -1 && item.isSystem === 0
    })
  }

  public form: Form = {
    nodeList: [],
    takeEffectType: 1,
    filters: [],
    triggerEvent: 1,
    name: '',
    template: ''
  }

  public saveConfirm () {
    (this.$refs as any).form.validate((valid) => {
      if (valid) {
        const params = Object.assign({}, this.form, {
          modelId: this.$route.params.businessId
        })
        commonAction({ url: `/server-work/action/serviceNode/config/${this.form.id ? 'update' : 'insert'}`, method: 'post', data: params }).then(res => {
          if (res.success) {
            this.$message.success('成功！')
            this.$emit('success')
          }
        })
      } else {
        return false;
      }
    });
  }

  public init (data: Form) {
    if ((this.$refs as any).form) {
      (this.$refs as any).form.clearValidate()
    }
    const { id, takeEffectType, filters, triggerEvent, name, template, nodeList } = data
    if (data.id) {
      this.form = { id, takeEffectType, filters, triggerEvent, name, template, nodeList }
    } else {
      this.form = {
        takeEffectType: 1,
        filters: [],
        nodeList: [],
        triggerEvent: 1,
        name: '',
        template: ''
      }
    }
  }

  private handleCommandField (key: string) {
    this.form.template += '${widget_' + key + '}'
  }

  private ruleSpareParts: object = {
    triggerEvent: [{ required: true, message: '请选择生效范围', trigger: 'change' }],
    name: [{ required: true, message: '请输入服务记录名称', trigger: 'blur' }]
  }

  private fetchNodeList () {
    commonAction({ url: '/server-flow/action/definition/userTask?modelId=' + this.$route.params.businessId, method: 'get' }).then(res => {
      if (res.success) {
        this.list = res.data || []
      }
    })
  }

  private beforeMount () {
    this.fetchNodeList()
  }
}
</script>

<style lang="stylus" scoped>
.varField {
  position: absolute;
  top: -48px;
  right: 0px;
}
.el-select
  width 100%
</style>
